<template>
  <div>
    <Form
      :model="postParams"
      :label-col="{ style: { width: '150px' } }"
      :wrapper-col="{ style: { width: 'calc(100% - 150px)' } }"
    >
      <div class="m-3">
        <Card>
          <div class="text-xl pb-2">板块页面配置</div>
          <FormItem label="模块名称：">
            <Input v-model:value="postParams.templateName" placeholder="输入板块名称" :maxlength="8" />
          </FormItem>
          <FormItem label="顶部banner：">
            <view class="flex">
              <ClipUploadImg v-model="postParams.topImg" :cropper="false" />
              <view class="ml-3 w-[270px] text-[#969799]">
                建议图片尺寸宽度750px，图片高度不限；
                建议顶部留200px高度不要放复杂内容；
              </view>
            </view>
          </FormItem>
          <FormItem label="页面背景色：">
            <input v-model="postParams.backColor" type="color" />
          </FormItem>
        </Card>
      </div>
      <div class="m-3">
        <Card>
          <div class="text-xl pb-2">推广设置</div>
          <FormItem label="推广到组织首页：">
            <RadioGroup v-model:value="postParams.promotionMode">
              <Radio v-for="item in dicts.promotionMode" :key="item.dictValue" :value="item.dictValue">{{ item.dictLabel }}</Radio>
            </RadioGroup>
            <OrganizationList v-if="postParams.promotionMode === PromotionMode.PARTSHOW" v-model="unionShowTenantLists" />
          </FormItem>
        </Card>
      </div>
      <div class="m-3 bg-white p-3 text-right">
        <Space>
          <Button @click="onSubmit">保存配置</Button>
          <Button type="primary" @click="nextStep">下一步</Button>
        </Space>
      </div>
    </Form>
  </div>
</template>

<script lang="ts" setup>
  import { Card, Button, Form, FormItem, Input, Space, RadioGroup, Radio } from 'ant-design-vue';
  import { ref, unref } from 'vue';
  import Dictionary from '@/utils/dictionary';
  import { ClipUploadImg } from '@/components/Upload/index';
  import OrganizationList from '../components/organizationList.vue';
  import { getMerchantTemplatInfo, getMerchantIndexList, merchantTemplateConfig } from '@/api/hby/resourceLeague/index';
  import { useRouter } from 'vue-router';
  import { PromotionTemplate } from '@/api/hby/resourceLeague/type';
  import { PromotionMode } from '@/enums/resourceLeague';
  import { useMessage } from '@/hooks/web/useMessage';

  
  const dicts = Dictionary.getLocalMulti([
    'promotionMode',
  ]);

  const emit = defineEmits(['nextStep']);
  const { currentRoute } = useRouter();
  const postParams = ref({} as PromotionTemplate);

  interface UnionShowTenantListsType {
    shopName: string;
    shopLogo: string;
    tenantId: number;
    id: number;
  }
  const unionShowTenantLists = ref<UnionShowTenantListsType[]>();

  function getDetail() {
    getMerchantTemplatInfo(unref(currentRoute).query.id).then((res) => {
      postParams.value = res;
    });
    getMerchantIndexList(unref(currentRoute).query.id).then((res) => {
      unionShowTenantLists.value = res.map((item) => {
        return {
          shopName: item.name,
          shopLogo: item.logoUrl,
          tenantId: item.tenantId,
          id: item.id
        };
      });
    });
  }
  getDetail();

  const { createMessage } = useMessage();
  function onSubmit() {
    postParams.value.tenantIds = unionShowTenantLists.value?.map(v=> v.tenantId) ?? [];
    merchantTemplateConfig(unref(postParams)).then(() => {
      createMessage.success('保存配置成功');
    });
  }

  function nextStep() {
    emit('nextStep');
  }
</script>

<style lang="less" scoped></style>
